<!--
 * @Author: zjj
 * @Date: 2020-01-02 09:07:57
 * @LastEditors  : zjj
 * @LastEditTime : 2020-01-03 11:55:10
 -->
<!--  -->
<template>
    <div class="position">
        <Nav title="选择城市">
            <template v-slot:left>
                <span class="back" @click="$router.back()"></span>
            </template>
        </Nav>
        <div class="body">
            <div class="title">当前定位</div>
            <div class="flex justify-between">
                <div class="flex aligin-center">
                    <span class="position-icon"></span>
                    <span class="address">{{address}}</span>
                </div>
                <div class="flex aligin-center" @click="showAsyncPicker">
                    <span class="color-gray">选择县区</span>
                    <span class="icon-select"></span>
                </div>
            </div>
            <div class="title mt-25">推荐城市</div>
             <span class="item"  @click="selectAddress('浙江省金华市兰溪市')">兰溪市</span>
            <div class="title mt-25">定位历史</div>
            <div class="flex flex-wrap">
                <template v-for="(item,index) in c_location ">
                    <span class="item" :key="index" @click="selectPosition(item)">{{item.district}}</span>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
import Nav from "../../components/Nav";
import { area } from "../../api/api";
export default {
  components: { Nav },
  data() {
    return {
      areaList: [], //区域列表
      cityList: [], //城市列表
      provinceList: [], //省市列表
      asyncPicker: null, //地址选择对象
      asyncSelectedIndex: [0, 0, 0] //地址选择索引
    };
  },
  computed: {
    c_location(){
      return this.$store.state.location.length>3?this.$store.state.location.slice(0,3):this.$store.state.location
    },
    address() {
      let { province = "", city = "", district = "" } =
        this.$store.state.location[0] || {};
      return province + city + district
        ? province + " " + city + " " + district
        : "定位有误，请重新定位";
    }
  },
  watch: {},
  methods: {
    selectAddress(address){
        let that=this
        AMap.plugin("AMap.Geocoder", function() {
        var geocoder = new AMap.Geocoder({
          // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
          city: "全国"
        });

        geocoder.getLocation(address, function(status, result) {
          if (status === "complete" && result.info === "OK") {
            // result中对应详细地理坐标信息
            let { lng: longitude, lat: latitude } = result.geocodes[0].location;
            let positionName = Object.assign({}, {province:"浙江省",city:"金华市",district:"兰溪市"}, {
              longitude,
              latitude
            });
            that.$store.commit("saveLocation", positionName);
            that.$store.commit("changeHandle")
          }
        });
      });
    },
    selectPosition(item){
        this.$store.commit("saveLocation", item);
        this.$store.commit("changeHandle")
    },
    // 选中地址
    selectHandle(selectedVal, selectedIndex, selectedText) {
      let that = this;
      this.asyncSelectedIndex = selectedIndex;
      let area = selectedText.join("/");
      let positionName = {
        province: this.provinceList[this.asyncSelectedIndex[0]].text,
        city: this.provinceList[this.asyncSelectedIndex[0]].children[
          this.asyncSelectedIndex[1]
        ].text,
        district: this.provinceList[this.asyncSelectedIndex[0]].children[
          this.asyncSelectedIndex[1]
        ].children[this.asyncSelectedIndex[2]].text
      };
      AMap.plugin("AMap.Geocoder", function() {
        var geocoder = new AMap.Geocoder({
          // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
          city: "全国"
        });

        geocoder.getLocation(area, function(status, result) {
          if (status === "complete" && result.info === "OK") {
            // result中对应详细地理坐标信息
            let { lng: longitude, lat: latitude } = result.geocodes[0].location;
            positionName = Object.assign({}, positionName, {
              longitude,
              latitude
            });
            that.$store.commit("saveLocation", positionName);
            that.$store.commit("changeHandle")
          }
        });
      });
    },
    //取消地址选择
    cancelHandle() {},
    // 显示地址选择
    showAsyncPicker() {
      this.asyncPicker.show();
      let a = document.querySelectorAll(".cube-picker-wheel-item");
      a.forEach(item => {
        item.style.fontSize = "16px";
      });
    }
  },
  created() {},
  mounted() {
    this.asyncPicker = this.$createCascadePicker({
      title: "区域选择",
      data: this.provinceList,
      selectedIndex: this.asyncSelectedIndex.slice(),
      onSelect: this.selectHandle,
      onCancel: this.cancelHandle,
      onChange: this.asyncChangeHandle
    });
    area().then(({ data: { result } }) => {
      this.areaList = result.areaList;
      this.cityList = result.cityList;
      this.provinceList = result.provinceList;
      this.provinceList.forEach(province => {
        province.children = this.cityList[province.value];
        province.children.forEach(city => {
          city.children = this.areaList[city.value];
        });
      });
      this.asyncPicker.setData(this.provinceList, [0, 0, 0]);
    });
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.position {
  height: 100%;
  .body {
    margin-top: 10px;
    padding: 0 24px;
  }
  .title {
    margin-bottom: 26px;
    font-size: 15px;
  }
  .position-icon {
    margin-right: 4px;
    width: 13px;
    height: 16px;
    background: url("../../assets/imgs/position.png");
    background-size: 100% 100%;
  }
  .address {
    font-size: 13px;
  }
  .icon-select {
    margin-left: 9px;
    width: 12px;
    height: 8px;
    background: url("../../assets/imgs/arrow-down.png");
    background-size: 100% 100%;
  }
  .flex-wrap {
    margin-bottom: 18px;
    flex-wrap: wrap;
  }
  .item {
    margin-right: 16px;
    margin-bottom: 16px;
    padding: 7px 13px;
    font-size: 13px;
    color: #070707;
    background: rgba(181, 181, 181, 0.2);
    border-radius: 5px;
  }
  .mt-25{
      margin-top: 25px;
  }
}
</style>